<template>
	<div class="layui-form-item">
		<label class="layui-form-label">{{title}}</label>
		<div class="layui-input-block" style="margin-left: 140px;">
			
			<div class="imgGroup">
				
				<view class="pre" v-for="( pic , index) in imgList" :key="index" v-if="index < count">
					<image :src="pic" mode="aspectFill" class="previewImg" @tap="previewImg(pic)"></image>
					<text class="closeBtn layui-icon layui-icon-close-fill" v-if="!disabled" @click="deletePic"></text>
				</view>
				
				<view  class="uploadBtn" @click="uploadPic" v-if="imgList.length < count && !disabled">
					<text class="layui-icon layui-icon-camera"></text>
				</view>
				
				<input type="text" :name="name" :value="imgList" class="hidden">
				
			</div>
			
		</div>
	</div>
</template>

<script>
	import kit from "../common/kit.js";
	export default {
		name: "uploadPic",
		props: {
			title : {
				type:String,
				default :""
			},
			name : {
				type:String,
				default : ""
			},
			value : {
				type:String,
				default : ""
			},
			uploadUrl: {
				type: String,
				default: ""
			},
			count : {
				type :[Number,String],
				default : 1
			},
			qiniu : {
				type : Boolean ,
				default : true 
			},
			disabled : {
				type : Boolean ,
				default : false 
			}
		},
		
		data() {
			return {
				imgList : [] ,
				token : "" ,
				uploadedCount : 0
			};
		},
		
		created() {
			this.initValue();
			this.loadToken();
		},
		
		watch:{
			value : function(newVal , oldVal){
				this.initValue();
			},
		},

		methods: {
			
			loadToken:function(res){
				var that = this ;
				var data = {} ;
				kit.get("/qiniu",data,function(res){
					that.token = res.token ;	
					that.domain = res.domain ;	
				});
			},
			
			previewImg:function(cur){
				uni.previewImage({
					urls:this.imgList ,
					current: cur
				});
			},
			
			initValue:function(e){
				var values = this.value ;
				if (!!values) {
					var arr = values.split(",");
					this.imgList = arr ;
				}
			},
			
			uploadPic:function(e){
				if(this.disabled){
					return false ;
				}
				var that = this ;
				uni.chooseImage({
					count : this.count ,
					success:function(res){
						uni.showLoading({
							title:"上传中…",
							mask:true
						});
						
						var paths = res.tempFilePaths;
						that.uploadedCount = paths.length ;
						for (var i = 0; i < paths.length; i++) {
							var path = paths[i];
							if(that.qiniu){
								that.uploadToQiniu(path);
							}else{
								that.upload(path);
							}
						}
					},
				});
			},
			
			upload:function(filePath){
				var that = this ;
				kit.uploadFile(this.uploadUrl , filePath , function(res){
					var url = res.url ;
					that.uploaded(url);
				});
			},
			
			uploaded:function(url){
				if (this.count == 1 && !!url) {
					this.imgList = [url] ;
				}else{
					if (this.imgList.length < this.count && !!url) {
						this.imgList.push(url); 
					}
				}
				this.uploadedCount -- ;
				if( this.uploadedCount <= 0){
					uni.hideLoading();
				}
				this.$emit("uploaded" , this.imgList);
			},
			
			deletePic : function(index){
				if(this.disabled){
					return false ;
				}
				this.imgList.splice(index,1);
				this.$emit("delete" , this.imgList);
			},
			
			guid : function () {
			    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
			        var r = Math.random() * 16 | 0,
			            v = c == 'x' ? r : (r & 0x3 | 0x8);
			        return v.toString(16);
			    });
			},
			
			uploadToQiniu:function(path){
				var that = this ;
				const upload_task = uni.uploadFile({
					url: "https://upload.qiniup.com" ,
					filePath: path ,
					name: 'file',
					formData: {
						token : this.token ,
						key : this.guid()
					},
					success(res) {
						var data = JSON.parse(res.data);
						var key = data.key ;
						var url = that.domain + key ;
						that.uploaded(url);
					},
					fail(err) {
						uni.showLoading({title: `上传失败!`})
						setTimeout(() => {uni.hideLoading();}, 2000)
						console.log(JSON.stringify(err));
					}
				});
				upload_task.onProgressUpdate((res) => {
					uni.showLoading({
						title: res.progress + "%" ,
						mask:true
					});
					console.log(res.progress);
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.layui-laypage-btn {
		display: inline-block;
	}

	.layui-laypage-spr+.layui-laypage-spr {
		display: none;
	}

	.layui-input {
		color: #000;
	}

	.layui-form select {
		display: block;
	}
	.hidden{
		display: none;
	}
	.imgGroup{
		&:after{
			content:"";
			clear: both;
			visibility: hidden;
			height: 0;
		}
		.pre , .uploadBtn{
			position: relative;
			display: block;
			margin: 0 2px 4px;
			width: 80px;
			height: 80px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			border: 1px solid #ddd;
			transition: all 0.4s;
			float: left;
			.previewImg{
				width: 100%;
				height: 100%;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
			}
			.closeBtn{
				font-size: 19px;
				color: #5d5d5d;
				position: absolute;
				top: -9px;
				right: -5px;
				cursor: pointer;
				&:hover{
					color: #000;
				}
			}
		}
		.uploadBtn{
			text-align: center;
			line-height: 80px;
			cursor: pointer;
			.layui-icon{
				transition: all 0.4s;
				color: #777;
				font-size: 40px;
			}
			&:hover{
				border-color: #555;
				.layui-icon{
					color: #000;
				}
			}
		}
	}
</style>
